<template>
  <div class="layout">
    <main>
      <keep-alive :include="['LayoutView', 'HomeView']">
        <router-view></router-view>
      </keep-alive>
    </main>
    <!-- 底部导航栏 -->
    <!-- placeholder属性是让下面的导航栏占据一点位置 -->
    <van-tabbar v-model="active" placeholder>
      <!-- to属性用于跳转路径 -->
      <van-tabbar-item name="home" to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="movie" to="/movie" icon="search">电影</van-tabbar-item>
      <van-tabbar-item name="cinima" to="/cinima" icon="friends-o">影院</van-tabbar-item>
      <van-tabbar-item name="mine" to="/mine" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

export default {
  name: 'LayoutView',
  data () {
    return {
      active: this.$route.name
    }
  },
  watch: {
    $route (to) {
      this.active = to.name
    }
  }
}
</script>
<style lang="less" scoped>

</style>
